
<!DOCTYPE html>
<html>
      <head>
           <meta charset=“ut f-8>
            <title>弹性百分比布局</title>
                <style>
                div{
                  width:80%px;
                  height:300px;
                  background:pink;
                  padding-left:10%;
                  margin:0 auto;
                  border:10px solid aqua;

                }
                @media screen and (max-width: 960px){
                   div{
                    height:500px;
                    border:20px solid slateblue;
                    background:orange;
                   }
                 } 
                 @media screen and (max-width: 460px){
                   div{
                    height:600px;
                    border:30px solid deeppink;
                    background:purple;
                   }
                 } 
                </style>
         </head>
          <body>

          	<div>响应式布局</div>
            
          	
                
          </body>
</html>
